<template>
  <div :style="{ height: '90%' }">
    <div class="map" ref="map" :autoresize="true" @click="xia"></div>
    <div @click="goBack" class="fan"><el-button>后退</el-button></div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import { ElMessage } from 'element-plus'
import { ref, onMounted } from 'vue'
import { getMap } from '../../request/index'
const map = ref(null)
const maplist = ref([
  {
    name: '中国',
    adcode: 100000
  }
])
// console.log(maplist)

const init = (mapname: string, adcode: number) => {
  getMap(adcode).then((res) => {
    console.log(res, '地图')
    const mapdata = res.data.features.map((item: { properties: any }) => {
      const data = (Math.random() * 80 + 20).toFixed(0)
      const tempValue = item.properties.center
        ? [...item.properties.center, data]
        : item.properties.center
      return {
        name: item.properties.name,
        //经纬度
        value: tempValue,
        adcode: item.properties.adcode,
        level: item.properties.level,
        data: data
      }
    })
    var myChart = echarts.init(map.value)
    echarts.registerMap(mapname, res.data)
    let option = {
      title: {
        text: `${mapname}地图`,
        left: 'center'
      },
      tooltip: {
        show: true,
        formatter: function (params: any) {
          return `adcode:${params.data.adcode}<br>name:${params.data.name}<br>data:${params.data.data}`
        }
      },
      visualMap: {
        min: 0,
        max: `100`,
        text: ['High', 'Low'],
        realtime: false,
        calculable: true,
        seriesIndex: [0],
        inRange: {
          color: ['#00467F', '#ff69b4'] // 蓝绿
        }
      },
      geo: {
        roam: true,
        map: mapname, // Ensure you have included the map data,
        label: {
          emphasis: {
            show: false
          }
        },
        itemStyle: {
          normal: {
            areaColor: '#fff',
            borderColor: '#000'
          },
          emphasis: {
            areaColor: '#f3f3f3'
          }
        }
      },
      series: [
        // 基础地图
        {
          roam: true,
          name: '中华民族共和国',
          type: 'map',
          map: mapname,
          label: {
            show: true,
            textStyle: {
              fontSize: '12px'
            },
            emphasis: {
              show: true,
              textStyle: {
                color: '#fff'
              }
            }
          },
          itemStyle: {
            emphasis: {
              areaColor: 'green',
              //高亮阴影
              shadowColor: 'rgba(0, 90, 128, 0.108)',
              //阴影度
              shadowBlur: 20
            }
          },
          data: mapdata
        },
        //散点
        {
          name: '散点',
          type: 'scatter',
          coordinateSystem: 'geo',
          data: mapdata,
          symbolSize: '10',
          itemStyle: {
            color: '#05C3F9'
          },
          zlevel: 6
        },
        //气泡点
        {
          name: '气泡点',
          type: 'scatter',
          symbol: 'pin',
          coordinateSystem: 'geo',
          data: mapdata,
          symbolSize: '50',
          label: {
            show: true,
            formatter: function (params: any) {
              return params.data.data || 0
            },
            color: '#fff',
            fontSize: 9
          },
          itemStyle: {
            color: '#F62157'
          },
          zlevel: 6
        },
        // 渲染点
        {
          name: '动态标点',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: mapdata.map((item: { data: number }) => {
            if (item.data > 60) return item
          }),
          symbolSize: 15,
          showEffectOn: 'render',
          rippleEffect: {
            brushType: 'stroke'
          },
          label: {
            formatter: '{b}',
            position: 'right',
            show: true
          },
          itemStyle: {
            color: 'yellow',
            shadowBlur: 20,
            shadowColor: 'red'
          },
          emphasis: {
            scale: true
          },
          zlevel: 1
        }
      ]
    }

    myChart.setOption(option, true)
    myChart.on('click', function (params) {
      // console.log(params)
      const { adcode, level, name } = params.data
      if (level == 'district') {
        console.log('最后一层了')
        return
      }
      if (!maplist.value.some((item) => item.adcode === adcode)) {
        maplist.value.push({
          name: name,
          adcode: adcode
        })
      }
      init(name, adcode)
    })
    window.addEventListener('resize', () => {
      myChart.resize()
    })
  })
}
const goBack = () => {
  // if (maplist.value.length > 1) {
  //   maplist.value.pop()
  //   const { name, adcode } = maplist.value[maplist.value.length - 1]
  //   init(name, adcode)
  // } else {
  //   console.log('没有更多的历史记录')
  // }
  if (maplist.value.length > 1) {
    // 恢复到上一个状态
    maplist.value.pop()
    const lastState = maplist.value[maplist.value.length - 1]
    if (lastState) {
      init(lastState.name, lastState.adcode)
    } else {
      // 恢复到初始地图状态
      init('中国', 100000)
    }
  } else {
    console.log('没有更多的历史记录')
  }
}

onMounted(() => {
  init('中国', 100000)
})
</script>

<style lang="scss" scoped>
.map {
  width: 100%;
  height: 100%;
  // background: #fcc;
  color: rgb(52, 52, 137);
}
.fan {
  cursor: pointer;
}
</style>
